<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="sum++">点击+1</button>
  <hr />
  <h2>当前信息为：{{ msg }}</h2>
  <button @click="msg += '?'">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>职业：{{person.job.j1.type}}</h2>
  <h2>薪资：{{person.job.j1.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">加薪</button>
</template>
<script>
// Vue3特点为组合型API，所以要使用computed需要引入
import { ref, reactive,watch } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    // 数据
    let sum = ref(0);
    let msg = ref("你好啊！");
    let person = ref({
      name:"张三",
      age:18,
      job:{
        j1:{
          type:"前端",
          salary:10
        }
      }
    })

    /* 
    如果watch监视的是ref所包裹的{}，那么直接监视外层无法触发回调
    解决办法：
    1. 通过 .value 形式正确监视（person.value）
    2. 通过 { deep:true } 开启深度监视
     */
    watch(person.value,(newVal,prevVal)=>{
      console.log('person发生了改变',newVal,prevVal);
    })

    watch(person,(newVal,prevVal)=>{
      console.log('person发生了改变',newVal,prevVal);
    },{deep:true})
    
    // 返回一个对象供模版使用
    return {
      sum,
      msg,
      person
    };
  }
};
</script>

